<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环遍历</title>
</head>
<body>
  <div>
    {{message}}
    <ul>
      <!-- 遍历vue中的arr数组, 生成当前的li元素 -->
      <li v-for="name in arr">{{name}}</li>
    </ul>
    <table border="1">
      <caption>英雄列表</caption>
      <tr>
        <th>名字</th><th>年龄</th><th>类型</th>
      </tr>
      <tr v-for="hero in heroes">
        <td>{{hero.name}}</td>
        <td>{{hero.age}}</td>
        <td>{{hero.type}}</td>
      </tr>
    </table>
    <!-- v-for可以实现嵌套循环 -->
    <ul v-for="hero in heroes">
      <li v-for="(name, age, type) in hero">
        {{name}}, {{age}}, {{type}}
      </li>
    </ul>
    <!-- v-for实现指定次数的循环 -->
    <ul>
      <li v-for="n in 5" :key="n">
        {{n}}
      </li>
    </ul>
  </div>
  <script src="vue.min.js"></script>
  <script>
    new Vue({
      el : "div",
      data : {
        message : "循环遍历",
        arr : ["关羽", "张飞", "赵云", "黄忠", "马超"], // 数组
        heroes : [ // 对象数组
          {name : "诸葛亮", age : 35, type : "法师"},
          {name : "司马懿", age : 36, type : "法刺"},
          {name : "曹操", age : 40, type : "战士"}
        ]
      }
    })
  </script>
</body>
</html>